<template>
  <view class="bg">
    <u-tabs :list="tabList" active-color="#6BAEFF" inactive-color="#2E3C4D"	 :is-scroll="false" :current="current" @change="change"></u-tabs>
    <u-empty text="暂无记录" mode="favor" margin-top="400"	v-if="list.length == 0"></u-empty>
    <view class="activity__list" v-for="shop in list" :key="shop.id">
      <view class="activity__top">
        <view class="activity__number">{{shop.shopName}}</view>
        <view class="activity__status " v-if="shop.status == 0">待审核</view>
        <view class="activity__status" v-if="shop.status == 1">待上线</view>
        <view class="activity__status" v-if="shop.status == 2">上线中</view>
        <view class="activity__status" v-if="shop.status == 3">已下线</view>
      </view>
      <view class="activity__center">
        <view class="activity__center-info">
          <text class="combo__name">{{shop.title}}</text>
          <image class="shopPic" :src="shop.imgUrl"></image>
        </view>
        <view class="activity__info">
          <text class="">每人参与次数：{{shop.joinCount == 0 ? '不限' : shop.joinCount + ' 次'}}</text>
          <text class="">是否需要关注商家：{{shop.isFocus	 == 0 ? '否' : '是'}}</text>
          <text class="">参与跳转：{{shop.joinCount == 0 ? '优惠券页面' : '抖音商家主页'}}</text>
          <text class="">延时发送时间：{{shop.laterSend	 == 0 ? '立即发送' : shop.joinCount + ' 小时'}}</text>

        </view>
      </view>
      <view class="activity__bottom">
        <view class="activity__time">活动时间：{{shop.beginDate}} - {{shop.endDate}}</view>
      </view>
      <view class="share">
        <text @click="getActivityCode(shop.id)">分享活动</text>
      </view>
    </view>
    <w-loading text="加载中..." mask="true" click="true" ref="loading"></w-loading>
    <!--    授权二维码-->
    <u-popup v-model="showCode" :closeable="true" mode="center" border-radius="10">
      <view class="shop__code">
        <!--        <canvas id="qrcode" canvas-id="qrcode" />-->
        <image class="codeImg" :src="qrcodeSrc"></image>
        <text class="illustrate">请打开抖音APP进行扫码</text>
        <u-button :custom-style="btnStyle" @click="saveCode">下载二维码</u-button>
      </view>
    </u-popup>
  </view>
</template>
<script>
import {activityList, getActivityQrcode} from "../../api/shop";
import {delTime} from "../../utils/utils";
import {base64ToPath} from "../../js_sdk/mmmm-image-tools";

export default {
  data() {
    return {
      list:[],
      tabList: [{
        name: '扫码领券'
      }, {
        name: '纯推广'
      }],
      current: 0,
      total:0,
      //打开二维码弹窗
      showCode: false,
      //二维码图片
      qrcodeSrc: "",
      btnStyle: {
        marginTop: '40rpx',
        background: '#D8D8D8 linear-gradient(90deg, #396CF4 0%, #4090EC 100%);',
        color: "#fff",
        border: "none"
      },
      query:{
        pageNum:1,
        pageSize:15,
        actityType:0
      }
    }
  },
  onLoad(){

  },
  onShow(){
    this.query.pageNum = 1;
    this.getList(1)
  },
  methods:{
    change(index) {
      this.current = index;
      this.query.actityType = index;
      this.query.pageNum = 1;
      this.getList(1);
    },
    //保存二维码
    saveCode() {
      const _this = this;
      uni.saveImageToPhotosAlbum({
        filePath: _this.qrcodeSrc,
        success: (res) => {
          uni.showToast({
            icon: 'success',
            title: '保存成功'
          })
        }
      })
    },
    //获取活动二维码
    async getActivityCode(id) {
      const _this = this;
      uni.showLoading({
        mask: true,
        title: '生成中...'
      })
      let res = await getActivityQrcode({
        activityId:id
      }).then();
      if (res.code == 200) {
        let img = 'data:image/jpg;base64,' + res.msg;
        base64ToPath(img).then(path => {
          this.qrcodeSrc = path;
          console.log(path);
        }).catch(error => {
          console.error(error)
        })
        uni.hideLoading()
        this.showCode = true;
      }
    },
    //获取活动列表
    getList(type){
      this.$refs.loading.open()
      activityList(this.query).then(res =>{
        this.$refs.loading.close()
        let result = res.rows;
        result.forEach(item =>{
          item.beginDate = delTime(item.beginDate)
          item.endDate = delTime(item.endDate)
        })
        this.total = res.total
        if (type == 1){
          this.list = res.rows
        }
        if (type == 2){
          this.list.push.apply(this.list,res.rows)
        }
      }).catch(err =>{
        this.$refs.loading.close()

      })
    },
    onReachBottom() {
      if (this.query.pageNum <= this.total) {
        this.query.pageNum += 1;
        this.getList(2)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.bg{
  width: 100vw;
  min-height: 100vh;
  background: #F8F9F9;
}
.blue{
  color: #396CF4;
}
.activity__list{
  width: 90%;
  margin: 40rpx auto;
  bactivity-radius: 8rpx;
  background: #ffffff;
  padding: 40rpx;
  .activity__top{
    display: flex;
    justify-content: space-between;
    color: #BEBEBE;
  }
  .activity__center{
    width: 100%;
    .activity__info{
      color: #AEB3C0;
      font-size: 22rpx;
      margin: 20rpx 0;
      display: flex;
      flex-wrap: wrap;

      >text{
        display: block;
        width: 48%;

      }
    }
    .activity__center-info{
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 140rpx;
      .combo__name{
        width: 75%;
        color: #2E3C4D;
        font-size: 37rpx;
        word-break: break-all;
        text-overflow: ellipsis;
        overflow: hidden;
        display: -webkit-box;//必须结合的属性 ，将对象作为弹性伸缩盒子模型显示
        -webkit-line-clamp: 2; //用来限制在一个块元素显示的文本的行数
        -webkit-box-orient: vertical;// 必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式
      }
      .shopPic{
        width: 100rpx;
        height: 100rpx;
      }

      .combo__price{
        color: #AEB3C0;
        font-size: 28rpx;
        >text{
          font-size: 20rpx;
        }
      }


    }
    .pay__user{
      display: block;
      margin-bottom: 50rpx;
      color: #AEB3C0;
    }
  }
  .activity__bottom{
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 24rpx;
    .activity__time{
      color: #AEB3C0;
    }
    .pay__price{
      display: flex;
      align-items: center;
      >view{
        font-size: 32rpx;
        font-weight: bold;
        >text{
          font-size: 22rpx;
        }
      }
    }
    .pay__btn{
      color: #ffffff;
      text-align: center;
      background: #D8D8D8 linear-gradient(90deg, #396CF4 0%, #4090EC 100%);
      bactivity-radius: 7rpx;
      letter-spacing: 5rpx;
      padding: 10rpx 10rpx;
    }
  }
  .share{
    width: 100%;
    height: 80rpx;
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    >text{
      color: #396CF4;
    }
  }
}
.shop__code {
  width: 80vw;
  padding: 20rpx;
  overflow: hidden;

  .codeImg {
    display: block;
    width: 300rpx;
    height: 300rpx;
    margin: 50rpx auto;
  }

  .illustrate {
    display: block;
    width: 100%;
    text-align: center;
    color: #2E3C4D;
  }

}

</style>
